<template>
	<view class="container">
		<view class="box">
			<view class="title">設置新密碼</view>
			<view class="new">
				<view class="text">新密碼</view>
				<input v-model="form.newPassWord" type="text" placeholder="請設置新密碼"
					placeholder-style="color:#ccc;font-size:26rpx;">
			</view>
			<view class="new">
				<view class="text">確認密碼</view>
				<input v-model="form.rePassWord" type="text" placeholder="請再次輸入新密碼"
					placeholder-style="color:#ccc;font-size:26rpx;">
			</view>
			<view class="confirm" @tap="confirm" :class="{active:form.newPassWord !== '' && form.rePassWord !== ''}">確定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		modifyPassword
	} from '@/api/login_register.js'
	export default {
		data() {
			return {
				form: {
					mobile: '',
					newPassWord: '',
					rePassWord: '',
				}
			};
		},
		onLoad(option) {
			// this.form.mobile = decodeURIComponent(option.mobile)
			this.form.mobile = option.mobile
			console.log(this.form.mobile,'手機號')
		},
		methods: {
			confirm() {
				if (this.form.newPassWord === '') {
					uni.showToast({
						title: '請設置新密碼',
						icon: 'none'
					})
				} else if (this.form.rePassWord === '') {
					uni.showToast({
						title: '請再次輸入新密碼',
						icon: 'none'
					})
				} else if (this.form.newPassWord !== this.form.rePassWord) {
					uni.showToast({
						title: '密碼不一致',
						icon: 'none'
					})
				} else {
					modifyPassword({
						...this.form
					}).then(res => {
						if (res.code === 1) {
							uni.showToast({
								title: '修改成功',
								duration: 2000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/login_register/login_register?flag=0"
								}, 3000)
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		height: calc(100vh - 90rpx);
		background-color: #F3F5F9;

		.box {
			background-color: #fff;
			padding: 30rpx;

			.title {
				font-size: 36rpx;
				margin-bottom: 60rpx;
			}

			.new {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				border-bottom: 1rpx solid #e7e7e7;
				padding-bottom: 20rpx;

				.text {
					width: 140rpx;
					margin-right: 20rpx;
				}

				input {
					padding: 0 15rpx;
				}
			}

			.confirm {
				height: 80rpx;
				// margin: 30rpx;
				background: #39B19D;
				border-radius: 16rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0.4;
			}

			.active {
				opacity: 1;
			}
		}
	}
</style>